<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网格布局-Layout</title>

  <style>
    * { 
      margin: 0;
      padding: 0;
    }
    html, body, #app {
      width: 100%;
      height: 100%;
      background-color: #fafbfe;
    }

    #app {
      display: grid;
      grid-template-columns: 180px 1fr;
      grid-template-rows: 48px 42px 1fr;
      grid-template-areas: 
      "header header"
      "aside tabs"
      "aside main";
    }

    .main { 
      background-color: red;
      grid-area: main;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .main .search {
      background-color: green;
    }
    .main .report {
      background-color: blue;
      flex: 1;
    }
    .header {
      background-color: #446cc0;
      grid-area: header;
      display: grid;
      grid-template-columns: 180px 1fr;
      grid-template-areas: 
      "logo content";
    }
    .aside {
      background: radial-gradient(102.22% 24.02% at 100% 0%, rgba(36, 145, 255, 0.2) 0%, rgba(0, 122, 245, 0) 100%), radial-gradient(107.5% 39.69% at 50% 100%, #3F91F7 0%, rgba(0, 127, 255, 0) 100%), radial-gradient(62.73% 62.73% at 107.5% 37.27%, #2478E4 0%, #007AF5 100%);
      grid-area: aside;
    }
    .header .logo {
      grid-area: logo;
    }
    .header .content {
      grid-area: content;
    }
    .tabs {
      background-color: #ececec;
      grid-area: tabs
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="main">
      <div class="search">search</div>
      <div class="report">report</div>
    </div>
    <div class="header">
      <div class="logo">logo</div>
      <div class="content">header</div>
    </div>
    <div class="aside">
      aside
    </div>
    <div class="tabs">tabs</div>
  </div>
</body>
</html>